<template>
    <div class="container">
        <div class="logo"></div>
        <div class="title"></div>
        <div class="line"></div>
        <div class="form">
            <van-form @submit="onSubmit">
                <van-field
                    v-model="username"
                    name="账号"
                    label="账号"
                    placeholder="账号"
                    :rules="[{ required: true, message: '请填写账号' }]"
                />
                <van-field
                    v-model="password"
                    type="password"
                    name="密码"
                    label="密码"
                    placeholder="密码"
                    :rules="[{ required: true, message: '请填写密码' }]"
                />
                <van-field
                    v-model="ku.text"
                    is-link
                    readonly
                    name="picker"
                    label="库区"
                     :rules="[{ required: true, message: '请选择所属库区' }]"
                    placeholder="点击选择所属库区"
                    @click="showPicker = true"
                />
                <van-popup v-model:show="showPicker" position="bottom">
                    <van-picker
                        :show-toolbar="true"
                        :columns="columns"
                        @confirm="onConfirm"
                        @cancel="showPicker = false"
                    />
                </van-popup>
                <div style="margin: 16px;">
                    <van-button round block type="info" native-type="submit">
                        提交
                    </van-button>
                </div>
                </van-form>
        </div>
    </div>
</template>

<script>

import { Toast } from 'vant';
export default {
    data() {
        return {
            username: '',
            password: '',
            ku: {
                text: null,
                value: null,
            },
            columns: [
                // { text: '杭州', value: 101 },
            ],
            showPicker: false,
        }
    },
    beforeMount() {
        this.fetchList()
    },
    methods: {
        fetchList() {
            this.$qitiApi.qiti.getNameList().then(res=>{
                this.columns = res.map(e=>{
                    let item = {
                        text: e.deptName,
                        value:e.deptId,
                    }
                    return item;
                })
            })
        },
        onSubmit() {
            if(this.username!='' && this.password!='') {
                let data = {
                    userName: this.username,
                    password: this.password,
                    deptId: this.ku.value,
                }

                this.$qitiApi.qiti.login(data).then(res=>{
                    if(res.code==200) {
                        localStorage.setItem("userIdqiti", res.data.userId)
                        localStorage.setItem('deptName', this.ku.text)
                        localStorage.setItem("token", res.data.token)
                        this.$router.push({
                            path: '/qiti',
                            query: {
                                deptId: this.ku.value,
                            }
                        })
                    } else {
                        const msg = res.msg;
                        Toast(msg);
                    }
                })
                
            }
        },
        onConfirm(val) {
            this.ku = val;
            this.showPicker = false;
        },
    }
}
</script>

<!-- <style>
/deep/ .van-field--error .van-field__control{
    color: blue;
}
</style> -->
<style scoped>

::v-deep .van-field--error .van-field__control::-webkit-input-placeholder {
  color: #b8b9bb;
}

* {
    box-sizing: border-box;
}
.container {
    height: 100vh;
    width: 100%;
    background-color: #fff;
    display: flex;
    align-items: center;
    flex-direction: column;
}

.logo {
    height: 22px;
    width: 116px;
    background: url('../assets/otto/logo.png') no-repeat 0px 0px;
    background-size: 100% 100%;
    margin-top: 25px;
}

.title {
    height: 24px;
    width: 264px;
    background: url('../assets/otto/title.svg') no-repeat 0px 0px;
    background-size: 100% 100%;
    margin-top: 25px;
    margin-bottom: 20px;
}

.line {
    width: 100%;
    height: 1px;
    background-color: #e2e2e2;
}

</style>